<template>
  <el-carousel
    :direction="direction"
    :type="type"
    style="width:30rem"
    height="15rem"
    :interval="speed"
  >
    <el-carousel-item v-for="(item,i) in banners" :key="i">
      <a :href="banners.link">
        <img :src="item.url" />
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "SlideShow",
  props: {
    banners: { type: Array, required: true }, //轮播图片数组
    speed: { type: Number, default: 2000 }, //速度
    // height: { type: Number, default: 230 },             //高度
    type: { type: String }, //类型值可以为""/card
    direction: { type: String, default: "horizontal" } //轮播的方向horizontal/vertical
  },
  data() {
    return {};
  }
};
</script>


<style>
html,
body {
  border: 1px solid rgb(176, 218, 255);
  border-bottom: none;
  background-color: aliceblue;
}
img,
a {
  width: 100%;
  height: 100%;
}
.el-carousel {
  border-radius: 16px;
}
</style>